import React, {Component} from 'react';
import {
  View,
  Text,
  Alert,
  Button,
  ToastAndroid,
  TextInput,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  ScrollView,
  Image,
  ImageBackground,
} from 'react-native';
import {connect} from 'react-redux';
import Activity from '../../components/Activity';
import {Market, CommonImg} from '../../images/index';
import {activityList, getTokenAndPower} from '../../api/index';
import {getMineIndex} from '../../api/index';
import {setToastMsg, setHomeData} from '../../actions/index';
import {HeaderLeft, HeaderRight} from '../../components';
import {getStorage} from '../../storage';
let widthScreen = Dimensions.get('window').width;
let heightScreen = Dimensions.get('window').height;
class MarketMain extends Component {
  static defaultProps = {
    todayDNANum: 1450000,
  };
  constructor(props) {
    super(props);
    this.state = {
      DNANum: 145200,
      isLoading: true,
    };
  }
  async testFunc() {
    // let uid = await getStorage('uid');
    // const setToastMsg = this.props.setToastMsg;
    // setToastMsg(123);
    // console.log(uid);
    // console.log('uid' + this.props.uid);
    // let result = await getMineIndex();
    let uid = await getStorage('uid');

    console.log(uid);
  }
  async getActivityList() {
    const result = await activityList({PageNo: 1, PageSize: 10});
    this.setState({data: result.data});
    console.log(result);
  }
  async getPowerAndTokens() {
    let result = await getTokenAndPower();
    this.setState({
      token: result.data.token_count,
      power: result.data.power_count,
    });
    this.props.setHomeData({
      token: result.data.token_count,
      power: result.data.power_count,
    });
  }
  componentDidMount() {
    this.getActivityList();
    this.getPowerAndTokens();
  }
  loadActivityList() {
    let allActivity = [];
    if (this.state.data !== undefined) {
      for (let i = 0; i < this.state.data.length; i++) {
        allActivity.push(
          <Activity
            key={this.state.data[i].id}
            id={this.state.data[i].id}
            title={this.state.data[i].title}
            img={this.state.data[i].img}
            short={this.state.data[i].short}
            pressFunc={() =>
              this.props.navigation.navigate('ActivityDetail', {
                id: this.state.data[i].id,
              })
            }
          />,
        );
      }
    }
    return allActivity;
  }
  render() {
    return (
      <View>
        <View style={lineStyle.longest} />
        <ScrollView
          pagingEnabled={true}
          style={{backgroundColor: '#F3F7FA', height: heightScreen * 0.8631}}>
          <View style={{height: heightScreen * 0.0162}} />
          <View
            style={{height: heightScreen * 0.2523, backgroundColor: '#FFFFFF'}}>
            <View
              style={{
                width: widthScreen,
                flexDirection: 'row',
                marginTop: heightScreen * 0.03,
                justifyContent: 'space-between',
              }}>
              <View style={{flexDirection: 'row'}}>
                <View style={styles.bluepointStyle} />
                <Text style={styles.subtitleStyle}>今日奖励</Text>
              </View>
            </View>
            <View style={{height: heightScreen * 0.025}} />
            <View
              style={{flexDirection: 'row', justifyContent: 'space-between'}}>
              <TouchableOpacity
                onPress={() => this.props.navigation.navigate('Integral')}>
                <ImageBackground
                  style={{
                    width: widthScreen * 0.4093,
                    height: heightScreen * 0.1179,
                    backgroundColor: '#2AA0F2',
                    borderRadius: heightScreen * 0.0077,
                    marginLeft: heightScreen * 0.03,
                    alignItems: 'center',
                  }}
                  source={Market.token_background}>
                  <View
                    style={{
                      height: heightScreen * 0.014,
                      marginTop: widthScreen * 0.02,
                    }}
                  />
                  <Text style={styles.white22}>我的碱基</Text>
                  <View style={{height: heightScreen * 0.018}} />
                  <Text style={styles.white18}>
                    {this.props.token.toFixed(2)}
                  </Text>
                </ImageBackground>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() =>
                  this.props.navigation.navigate('CalculateForce')
                }>
                <ImageBackground
                  style={{
                    width: widthScreen * 0.4093,
                    height: heightScreen * 0.1179,
                    backgroundColor: '#F9AF5F',
                    borderRadius: heightScreen * 0.0077,
                    marginRight: heightScreen * 0.03,
                    alignItems: 'center',
                  }}
                  source={Market.power_background}>
                  <View
                    style={{
                      height: heightScreen * 0.014,
                      marginTop: widthScreen * 0.02,
                    }}
                  />
                  <Text style={styles.white22}>我的算力</Text>
                  <View style={{height: heightScreen * 0.018}} />
                  <Text style={styles.white18}>{this.props.power}</Text>
                </ImageBackground>
              </TouchableOpacity>
            </View>
          </View>
          <View style={lineStyle.longest} />
          <View style={{height: heightScreen * 0.0169}} />
          <View
            style={{height: heightScreen * 0.1923, backgroundColor: '#FFFFFF'}}>
            <View
              style={{
                width: widthScreen,
                flexDirection: 'row',
                marginTop: heightScreen * 0.03,
                justifyContent: 'space-between',
              }}>
              <View style={{flexDirection: 'row'}}>
                <View style={styles.bluepointStyle} />
                <Text style={styles.subtitleStyle}>会员营销管理</Text>
              </View>
              {/*<TouchableOpacity onPress={() => this.testFunc()}>*/}
              {/*  <Image source={CommonImg.Arrow} style={iconStyles.forward} />*/}
              {/*</TouchableOpacity>*/}
            </View>
            <View
              style={{flexDirection: 'row', justifyContent: 'space-between'}}>
              <View>
                <View
                  style={{
                    flexDirection: 'row',
                    marginTop: heightScreen * 0.023,
                  }}>
                  <Text style={styles.black20}>
                    每邀请一个好友成功注册 可获得
                  </Text>
                  <Text style={styles.orange20}>1个算力</Text>
                </View>
                <Text style={styles.gray20}>
                  您可通过送碱基得算力获得更多算力
                </Text>
              </View>
              <TouchableOpacity
                style={{marginRight: heightScreen * 0.03}}
                onPress={() => this.props.navigation.navigate('Invitation')}>
                <Image
                  style={{
                    width: heightScreen * 0.0454,
                    height: heightScreen * 0.0454,
                    marginLeft: heightScreen * 0.006,
                    marginTop: heightScreen * 0.02,
                  }}
                  source={Market.invest}
                />
                <Text style={styles.gray15}>邀请好友</Text>
              </TouchableOpacity>
            </View>
          </View>
          <View style={lineStyle.longest} />
          {this.loadActivityList()}
          <View style={{height: heightScreen * 0.34}} />
        </ScrollView>
      </View>
    );
  }
}
export default connect(
  state => ({token: state.home.token_count, power: state.home.power_count}),
  dispatch => ({
    setToastMsg: text => dispatch(setToastMsg(text)),
    setHomeData: data => dispatch(setHomeData(data)),
  }),
)(MarketMain);
const iconStyles = StyleSheet.create({
  forward: {
    width: heightScreen * 0.0123,
    height: heightScreen * 0.0215,
    marginRight: heightScreen * 0.03,
    marginTop: heightScreen * 0.005,
  },
});
const styles = StyleSheet.create({
  containerStyle: {
    width: widthScreen,
    height: heightScreen,
    backgroundColor: '#F3F7FA',
  },
  titleViewStyle: {
    backgroundColor: '#FFFFFF',
    height: 58,
  },
  titleTextStyle: {
    textAlign: 'center',
    width: widthScreen,
    top: 20,
    fontWeight: 'bold',
    //fontFamily: 'MicrosoftYaHei',
    fontSize: 14,
  },
  scrollStyle: {
    backgroundColor: '#F3F7FA',
  },
  abortHGBCStyle: {
    width: widthScreen,
    height: 300,
    backgroundColor: '#FFFFFF',
    marginTop: 10,
    alignItems: 'center',
  },
  peopleListRowStyle: {
    width: widthScreen,
    height: 199.5,
    backgroundColor: '#FFFFFF',
    marginTop: 12,
    justifyContent: 'space-between',
  },
  lankStyle: {
    width: widthScreen,
    height: 300,
    backgroundColor: '#FFFFFF',
    marginTop: 12,
  },
  bluepointStyle: {
    marginTop: heightScreen * 0.004,
    width: widthScreen * 0.013,
    height: heightScreen * 0.024,
    marginLeft: heightScreen * 0.03,
    backgroundColor: '#2672C0',
  },
  subtitleStyle: {
    color: '#333333',
    marginLeft: heightScreen * 0.008,
    fontWeight: 'bold',
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.022,
  },
  squarePeopleStyle: {
    width: 70,
    height: 75,
    backgroundColor: '#E5E5E5',
    borderRadius: 5,
  },
  peopleNameStyle: {
    width: 70,
    textAlign: 'center',
    marginTop: 12,
    fontWeight: 'bold',
    //fontFamily: 'MicrosoftYaHei',
    color: '#656565',
    fontSize: 13,
  },
  moreStyle: {
    //width: 295,
    textAlign: 'right',
    marginTop: 4,
    marginRight: 20,
    //fontFamily: 'MicrosoftYaHei',
    color: '#989898',
    fontSize: 12,
  },
  white18: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.02,
    color: '#FFFFFF',
  },
  white22: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.022,
    color: '#FFFFFF',
  },
  white30: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.03,
    color: '#FFFFFF',
  },
  black20: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.021,
    color: '#333333',
    marginLeft: heightScreen * 0.027,
  },
  orange20: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.021,
    color: '#FE7241',
  },
  gray15: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.015,
    marginTop: heightScreen * 0.007,
    color: '#989898',
  },
  gray20: {
    marginTop: heightScreen * 0.014,
    marginLeft: heightScreen * 0.027,
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.02,
    color: '#989898',
  },
});
const lineStyle = StyleSheet.create({
  Middle: {
    width: widthScreen * 0.667,
    height: 0.5,
    backgroundColor: '#DCDCDC',
  },
  Middle2: {
    width: widthScreen * 0.792,
    height: 0.5,
    backgroundColor: '#DCDCDC',
  },
  Long: {
    width: widthScreen * 0.84,
    height: 0.5,
    backgroundColor: '#DCDCDC',
  },
  longest: {
    width: widthScreen,
    height: 0.5,
    backgroundColor: '#DCDCDC',
  },
});
